<!--
 * @Author: your name
 * @Date: 2021-05-07 11:21:22
 * @LastEditTime: 2021-05-07 14:37:47
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \vue01d:\HTML001\布局小技巧\练习\计算属性监听器.html
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<style>

</style>
<body>
    <div id="app">
        <input type="text" v-model="msg">
    </div>
    



        <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
        <script>
            new Vue({

                el:"#app",

                data(){
                    return{
                        msg:"hello",
                        obj:{
                            name:"zhangsan" ,
                            age:{na:"dj",dhjs:2}
                        }
                    }

                },
                computed:{
                    he:{
                        get(){
                            return this.msg.split("").reverse().join("").toUpperCase()
                        },
                        set(newVBalue){
                            this.msg.split("").reverse().join("").toUpperCase()
                        }
                    }
                },
                watch:{
                    obj:{
                        handler(val){
                            console.log(val.name)
                            this.msg+=val.name
                            console.log(this.msg)

                        },
                        immediate:true,
                        deep:true
                    }
                }


            })

        </script>

</body>
</html>